<template>
	<div>
		<home-header></home-header>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icons :list="iconList"></home-icons>
		<home-recommend :list="recommendList"></home-recommend>
		<home-weekend :list="weekendList"></home-weekend>
		<!-- <router-link to="/list">列表页</router-link> -->
	</div>
</template>

<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import HomeRecommend from './components/Recommend.vue'
import HomeWeekend  from './components/Weekend.vue'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
	name: 'Home',
	// 局部组件注册
	components:{
		HomeHeader:HomeHeader,
		HomeSwiper:HomeSwiper,
		HomeIcons:HomeIcons,
		HomeRecommend:HomeRecommend,
		HomeWeekend:HomeWeekend
	},
	data () {
		return {
			lastCity: '',
			swiperList: [],
			iconList: [],
			recommendList: [],
			weekendList: []
		}
	},
	computed: {
		...mapState(['city'])
	},
	methods: {
		getHomeInfo () {
			// 发起 ajax 请求
			axios.get('/api/index.json?city=' + this.city).then(this.getHomeInfoSucc)
		},
		// 获取数据
		getHomeInfoSucc (res) {
			res = res.data;
			console.log(res);
			if (res.ret && res.data) {
				const data = res.data;
				// console.log(data.swiperList);
				
				this.swiperList = data.swiperList;
				this.iconList = data.iconList;
				this.recommendList = data.recommendList;
				this.weekendList = data.weekendList;
			}
		}
	},
	mounted () {
		this.lastCity = this.city
		this.getHomeInfo()
	},
	// 页面重新加载会显示下面的内容
	activated () {
		if (this.lastCity !== this.city) {
			this.lastCity = this.city
			//  重新发送 ajax 请求
			this.getHomeInfo()
		}
	}
};
</script>

<style>
	
</style>
